<template>
    <div>
        <van-nav-bar title="极客园" />
        <van-form @submit="onSubmit">
            <van-field v-model="user.mobile" name="mobile" label="手机号" placeholder="请输入手机号" required
                :rules="[{ required: true, message: '请填写十一位手机号', pattern: /^1[3-9]\d{9}$/}]" />
            <van-field v-model="user.code" type="password" name="code" label="密码" placeholder="请输入密码" required
                :rules="[{ required: true, message: '请填写六位数密码', pattern: /^\d{6}$/}]" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" :loading="isLoading" :disabled="isLoading"
                    loading-text="加载中...">登录
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import { getLoginAPI } from '@/api'
    import { Notify } from 'vant'
    import { setToken } from '@/utils/token.js'
    export default {

        data() {
            return {
                user: {
                    mobile: '13888888888', //手机号
                    code: '246810' //短信验证码246810
                },
                isLoading: false
            };
        },

        mounted() {

        },

        methods: {
            async onSubmit(values) {
                this.isLoading = true
                try {
                    const res = await getLoginAPI(this.user)
                    Notify({ type: 'success', message: '登陆成功' });
                    setToken(res.data.data.refresh_token)
                    // this.$router.push() 压栈(会产生历史记录，可以回退)，this.$router.replace() 替换(不会产生历史记录)
                    this.$router.replace({
                        path: '/layout/home'
                    })
                } catch (err) {
                    Notify({ type: 'danger', message: '账号或密码错误' });
                }
                this.isLoading = false
            }
        },
    };
</script>

<style scoped lang="less">

</style>